<template>
	<div class="monitor-3">
		<div>
			<el-date-picker @change='dateChange' v-model="createTime" type="date" :placeholder="$t('route.Select_date')" />
			<label>{{ $t('route.Sewing_power') }}</label>
			<el-input-number v-model="sewPower" />
			<el-button @click='dataTypeClick'>{{ $t('route.switch') }}</el-button>

			<div class="div-handle-right">
				<el-button @click='refreshClick'>{{isRefresh?$t('route.Stop_Refresh'):$t('route.auto_refresh')}}</el-button>
				<el-pagination :page-sizes="[60, 150, 300, 600]" @size-change="handleSizeChange" style="float: right;"
					background @current-change="handlePageChange" :current-page="query.pageNum"
					:page-size="query.pageSize" layout="total, sizes,prev, pager, next" :total="query.total">
				</el-pagination>
			</div>
		</div>

		<div>
			<div v-if="chartShow" class="chart" id="echart-1"></div>
		</div>
		<div v-show="isShowStdSew">{{ $t('route.Real_time_work') }}{{stdSew}}{{ $t('route.second') }}</div>

	</div>
</template>


<script>
	import http from "../../js/http/http.js";
	import api from "../../js/http/api.js";
	import CommonUtils from "../../js/common/common-utils.js";
	import * as echarts from 'echarts';
	import EchartsUtils from '../../js/common/echarts-utils.js'
	import {
		markRaw
	} from 'vue'
	import i18n from '../../i18n/index';
	export default {
		data() {
			return {
				deviceId: null,
				createTime: new Date(),
				isRefresh: false,
				mTimer: null,
				mChart: null,
				chartShow: false,
				isShowStdSew: false,
				stdSew: 0,
				sewPower: 30,
				isPower: true, //true:功率显示  false:缝纫模式显示
				yData: [],
				xData: [],
				data: [],
				option: null,
				query: {
					pageNum: 1,
					pageSize: 150,
					total: 0
				},
			};
		},
		methods: {
			dataRefresh() {
				this.mChart.clear();
				if (this.isPower) {
					this.yData = [];
					this.yData = [...this.data];
					this.option = EchartsUtils.initLineChartOption(i18n.global.t('route.Sewing_curve'), this.xData, this.yData);
				} else {
					this.yData = [];
					for (var item of this.data) {
						this.yData.push(item < this.sewPower ? 0 : 1);
					}
					this.option = EchartsUtils.initStepLineChartOption(i18n.global.t('route.Sewing_curve'), this.xData, this.yData);
				}
				this.mChart.setOption(this.option);
			},

			dataTypeClick() {
				this.isPower = !this.isPower;
				this.dataRefresh();
			},

			getPowerStepReport() {
				this.xData = [];
				this.yData = [];
				this.data = [];
				http.post(api.GET_POWER_STEP_REPORT, {
					deviceId: this.deviceId,
					createTime: this.createTime.format('yyyy-MM-dd'),
					pageNum: this.query.pageNum,
					pageSize: this.query.pageSize / 30,
				}, data => {
					this.query.total = data.data.total * 30;
					for (var i = 0; i < data.data.dataList.length; i++) {
						this.xData.push(i + 's');
						this.yData.push(data.data.dataList[i]);
						this.data.push(data.data.dataList[i]);
					}
					this.initEchart1(this.xData, this.yData);
				});
			},
			handlePageChange(pageNum) {
				this.query.pageNum = pageNum;
				this.getPowerStepReport();
			},
			handleSizeChange(val) {
				this.query.pageSize = val;
				this.getPowerStepReport();
			},
			dateChange() {
				this.getPowerStepReport();
			},
			refreshMarkLine(xIndex, sliderIndex) {
				this.option.series[0].markLine.data[sliderIndex].xAxis = xIndex;
				this.mChart.setOption(this.option);
				this.isShowStdSew = true;
				var index0 = this.option.series[0].markLine.data[0].xAxis;
				var index1 = this.option.series[0].markLine.data[1].xAxis;
				this.stdSew = Math.abs(index0 - index1);
			},

			initEchart1(xData, yData) {
				this.$nextTick(() => {
					if (this.mChart == null) {
						this.mChart = markRaw(echarts.init(document.getElementById("echart-1")));
						var downIndex = -1;
						var sliderIndex = 0;
						this.mChart.getZr().on('click', params => {
							let point = [params.offsetX, params.offsetY];
							if (this.mChart.containPixel('grid', point)) {
								// convertFromPixel转换像素坐标值到逻辑坐标系上的点
								let xIndex = this.mChart.convertFromPixel({
										seriesIndex: 0
									},
									point)[0];
								var index0 = this.option.series[0].markLine.data[0].xAxis;
								var index1 = this.option.series[0].markLine.data[1].xAxis;
								console.log('index0=====' + index0)
								console.log('index1=====' + index1);
								console.log('xIndex=====' + xIndex);
								if (index0 >= xIndex - 1 && index0 <= xIndex + 1) {
									sliderIndex = 0;
									console.log('===sliderIndex======' + sliderIndex)
								} else if (index1 >= xIndex - 1 && index1 <= xIndex + 1) {
									sliderIndex = 1;
									console.log('===sliderIndex======' + sliderIndex)
								}
								this.refreshMarkLine(xIndex, sliderIndex);

							}
						});
					}
					this.dataRefresh();

				})
			},
			refreshClick() {
				this.isRefresh = !this.isRefresh;
			}
		},
		created() {
			this.chartShow = true;
			this.deviceId = CommonUtils.getParam(this, 'deviceId', 'setDeviceId');
			this.getPowerStepReport();
			this.mTimer = setInterval(() => {
				if (this.isRefresh) this.getPowerStepReport();
			}, 15000)
		},
		unmounted() {
			clearInterval(this.mTimer);
			this.chartShow = false;
		},
	};
</script>

<style lang="scss" scoped>
	.monitor-3 {
		>div:nth-of-type(1) {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 20px;
			background-color: #ffffff;
			padding: 20px;
			border-radius: 5px;

			>label {
				margin-left: 20px;
			}

			.div-handle-right {
				flex: 1;
				flex-direction: row-reverse;
				text-align: right;
				display: flex;
				align-items: center;

				>input:nth-of-type(1) {
					border: 1px solid #eeeeee;
					font-size: 15px;
					width: 150px;
					padding: 5px 8px;
					outline: none;
				}

				>button {
					color: #A866FF;
					margin-left: 10px;
					padding: 4px 20px;
				}
			}
		}

		>div:nth-of-type(2) {
			background-color: #ffffff;
			padding: 20px;
			border-radius: 5px;
			margin-top: 20px;

			.chart {
				height: 250px;
				width: 100%;

			}
		}

		>div:nth-of-type(3) {
			background-color: #ffffff;
			padding: 20px;
			border-radius: 5px;
			margin-top: 10px;
			font-size: 50px;
			text-align: center;
			font-weight: 800;
		}

	}
</style>
